<script lang="ts" setup>
import { ref, computed, watch } from "vue";
import { formatBigNumber, formatTimestamp } from "@/comm/format";
import YHader from "@/views/home/component/YHader.vue";
import Icon from "@/assets/Star.png";

const item = {
    type: "transfer",
    fromAddressType: "eoa",
    fromTag: "test",
    address: "0x615934126357996587479212000",
    toAddressType: "",
    toTag: "",
    toAddress: "",
    outAmount: 2,
    outSymbol: "",
    outusdt: "",
    inAmount: "",
    inSymbol: ""
};
const onPerson = function (args: any, args2: any, args3: any) {};
const onDetail = function (args1: any, args2: any) {};
const onJump = function (args: any) {};
</script>

<template>
    <div class="tb" style="margin-left: 30px">
        <YHader></YHader>
        <div class="d-flex th-body" v-for="item_ in 10">
            <div class="th-item f-item1">{{ "swap" }}</div>
            <div class="th-item f-item2">
                <span class="iconfont" :class="item.fromAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                <p>{{ "x12391023123ad" }}</p>
            </div>
            <div class="th-item f-item3">
                <VIcon v-if="true" style="color: #737b83">mdi mdi-arrow-right-thin</VIcon>
                <VIcon v-else style="color: #737b83">mdi mdi-swap-horizontal</VIcon>
            </div>
            <div class="th-item f-item4">
                <span class="iconfont" :class="item.fromAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                <p>{{ "x12391023123ad" }}</p>
            </div>
            <div class="th-item f-item5 d-flex flex-column">
                <div class="flex-txt text-truncate lose-color wgt" :title="String(item.outAmount)">
                    -625.000000
                    <span class="syb coin-link" @click="onDetail(item, 'out')">USDT</span>
                    <!-- {{ formatBigNumber(item.outAmount) }} -->
                    <!-- <span class="syb coin-link" @click="onDetail(item, 'out')">{{ item.outSymbol }}</span> -->
                </div>
                <div class="flex-txt text-truncate win-color wgt" :title="String(item.inAmount)">
                    -625.000000
                    <span class="syb coin-link" @click="onDetail(item, 'in')">OBJ</span>
                    <!-- {{ formatBigNumber(item.inAmount) }}  -->
                    <!-- <span class="syb coin-link" @click="onDetail(item, 'in')">{{ item.inSymbol }}</span> -->
                </div>
            </div>
            <div class="th-item f-item6">
                <span :title="item.outusdt">${{ formatBigNumber(item.outusdt) }}</span>
            </div>
            <div class="th-item f-item7">
                <span class="c-title-5 look" @click="onJump(item)">
                    <VIcon style="color: #737b83">mdi mdi-open-in-new</VIcon>
                </span>
                <span class="c-title-5 look ml-3" @click="onJump(item)">
                    <VIcon style="color: #737b83">mdi mdi-share-variant</VIcon>
                </span>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
@import url("./index.less");
</style>
